/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, ScrollView, TouchableOpacity, TouchableHighlight, Dimensions, Image} from 'react-native';

import Common from '../../component/common';

import Loading from '../../component/loading';

import LoadError from '../../component/loadError';

import ToolbarComponent from '../../component/ToolbarComponent';

import Share from '../../component/share';

import Detail from './detail';

import RankList from './rankList';

const totalWidth = Dimensions.get('window').width;

export default class MoreProgram extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      height: 0,
      scrollToHeight: 0,
      loading: true,
      success: false,
      errorMessage: '',
      source: null,
    };
  }
  componentDidMount(){
    this.fetchData();
  }
  fetchData = () => {
    this.setState({
      loading: true,
      success: false,
    });
    let formData = new FormData();
    formData.append("type", this.props.name.type);
    formData.append("range", this.props.did);
    Common.fetchData("post", "/billboard/moreDetail", formData, (responseData) => {
      this.setState({
        source: responseData.entity,
        loading: false,
        success: true,
      });
    },()=>{
      this.setState({loading: false,
                    success: false,
                    errorMessage: "请求失败",
                  });
    },()=>{
      this.setState({loading: false,
                      success: false,
                      errorMessage: "网络错误",
                    });
    });
  };
  updown = (data) =>{
    var updown = {};
    if(data > 0){
      updown.change = data;
      updown.color = '#ff4546';
      updown.icon = require('../../images/up.png');
    }else if(data < 0){
      updown.change = -data;
      updown.color = '#62d474';
      updown.icon = require('../../images/down.png');
    }else{
      updown.change = "";
      updown.icon = require('../../images/still.png');
    }
    return updown;
  };
  listRow = (rowData,idx,type) => {
    var updown = this.updown(rowData.rankingChanged);
    return (
      <TouchableHighlight key={idx} underlayColor="#fafafa" delayPressIn={100} onPress={() => Common.onForward(this,Detail,type,rowData.id)}>
        <View style={styles.listrow} >
          <View style={[styles.rank,styles.viewRow]}>
            <Text style={styles.rankIndex}>{rowData.Ranking}</Text>
            <View style={styles.rankChange}>
              <Image style={styles.updown} source={updown.icon} />
              <Text style={{color: updown.color}}>{updown.change}</Text>
            </View>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text numberOfLines={2} style={[styles.head,{fontSize: 13}]}>{rowData.title}</Text>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text numberOfLines={1} style={[styles.head,{fontSize: 13}]}>{rowData.source}</Text>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text style={[styles.head,{fontSize: 13}]}>{rowData.indexNumber}</Text>
          </View>
        </View>
      </TouchableHighlight>
    )
  };
  render() {
      if(this.state.success){
        var rowData = this.state.source;
        console.log(rowData);
        var arr = [];
        rowData.resultList.map((val,idx) => {
          if(idx<3){
            var updown = this.updown(val.rankingChanged);
            arr.push(updown);
          }
        });
      }
      return (
        <View style={{flex: 1, backgroundColor: '#f6f6f6'}}>
          <ToolbarComponent
            leftItem={{
              title: 'Back',
              layout: 'icon',
              icon: require("../../images/back.png"),
              onPress: () => {
                 Common.onBack(this,{"id":this.props.did,"type":this.props.name,"collectionStatus":this.collection == this.state.isCollection});
              },
            }}
            // extraItem={{
            //   title: 'Collection',
            //   layout: 'icon',
            //   icon: collectionIcon,
            //   onPress: () => {
            //     if(this.state.isCollection){
            //       Common.deleteCollection({id: this.props.did, type: this.state.source.type},() => {
            //         this.setState({isCollection: false});
            //       });
            //     }else{
            //       Common.addCollection({id: this.props.did, type: this.state.source.type},() => {
            //         this.setState({isCollection: true});
            //       });
            //     }
            //   },
            // }}
            // rightItem={{
            //   title: 'Share',
            //   layout: 'icon',
            //   icon: require("../../images/share/share.png"),
            //   onPress: () => {
            //     if(this.refs.share){
            //       this.refs.share.show(this.location, this.state.source.type);
            //     }
            //   },
            // }}
          >
            <View style={styles.toolbarV}>
              <Text style={styles.toolbarT} numberOfLines={1}>榜单-{this.props.name.title}</Text>
            </View>
          </ToolbarComponent>
          {
          (this.state.loading?
            <Loading />:
            (this.state.success?
            <ScrollView style={{backgroundColor: '#f6f6f6'}} ref = {(e) => this.location = e }>
            <View style={{height: 10,backgroundColor: 'transparent'}} />
            <View style={styles.typeRow}>
              <View style={styles.three}>
                <TouchableHighlight style={styles.first} activeOpacity={0.5} underlayColor='#fff' delayPressIn={100} onPress={() => Common.onForward(this,Detail,rowData.type,rowData.resultList[0].id)}>
                  {rowData.resultList[0].pic1Path?
                    <Image style={styles.first} source={{uri: rowData.resultList[0].pic1Path}}>
                      <Image style={styles.ranking} source={require('../../images/flag2.png')}>
                        <Text style={styles.rankingR}>{rowData.resultList[0].ranking}</Text>
                      </Image>
                      <View style={styles.tips}>
                        <Text style={styles.tipsT} numberOfLines={1}>{rowData.resultList[0].title}</Text>
                        <View style={styles.tipsNIC}>
                          <Text style={styles.tipsN}>{rowData.resultList[0].indexNumber}</Text>
                          <View style={styles.tipsIC}>
                            <Image style={styles.tipsI} source={arr[0].icon} />
                            <Text style={styles.tipsC}>{arr[0].change}</Text>
                          </View>
                        </View>
                      </View>
                    </Image>:
                    <View style={styles.first}>
                      <Image style={styles.ranking} source={require('../../images/flag2.png')}>
                        <Text style={styles.rankingR}>{rowData.resultList[0].ranking}</Text>
                      </Image>
                      <View style={styles.tips}>
                        <Text style={styles.tipsT} numberOfLines={1}>{rowData.resultList[0].title}</Text>
                        <View style={styles.tipsNIC}>
                          <Text style={styles.tipsN}>{rowData.resultList[0].indexNumber}</Text>
                          <View style={styles.tipsIC}>
                            <Image style={styles.tipsI} source={arr[0].icon} />
                            <Text style={styles.tipsC}>{arr[0].change}</Text>
                          </View>
                        </View>
                      </View>
                    </View>
                  }
                </TouchableHighlight>
                <View style={styles.two}>
                  <TouchableHighlight style={styles.second} activeOpacity={0.5} underlayColor='#fff' delayPressIn={100} onPress={() => Common.onForward(this,Detail,rowData.type,rowData.resultList[1].id)}>
                    {rowData.resultList[1].pic2Path?
                      <Image style={styles.one} source={{uri: rowData.resultList[1].pic2Path}}>
                        <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                          <Text style={styles.rankingoneR}>{rowData.resultList[1].ranking}</Text>
                        </Image>
                        <View style={styles.tipsone}>
                          <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[1].title}</Text>
                          <View style={styles.tipsoneNIC}>
                            <Text style={styles.tipsoneN}>{rowData.resultList[1].indexNumber}</Text>
                            <View style={styles.tipsoneIC}>
                              <Image style={styles.tipsoneI} source={arr[1].icon} />
                              <Text style={styles.tipsoneC}>{arr[1].change}</Text>
                            </View>
                          </View>
                        </View>
                      </Image>:
                      <View style={styles.one}>
                        <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                          <Text style={styles.rankingoneR}>{rowData.resultList[1].ranking}</Text>
                        </Image>
                        <View style={styles.tipsone}>
                          <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[1].title}</Text>
                          <View style={styles.tipsoneNIC}>
                            <Text style={styles.tipsoneN}>{rowData.resultList[1].indexNumber}</Text>
                            <View style={styles.tipsoneIC}>
                              <Image style={styles.tipsoneI} source={arr[1].icon} />
                              <Text style={styles.tipsoneC}>{arr[1].change}</Text>
                            </View>
                          </View>
                        </View>
                      </View>
                    }
                  </TouchableHighlight>
                  <TouchableHighlight style={styles.third} activeOpacity={0.5} underlayColor='#fff' delayPressIn={100} onPress={() => Common.onForward(this,Detail,rowData.type,rowData.resultList[2].id)}>
                    {rowData.resultList[2].pic2Path?
                      <Image style={styles.one} source={{uri: rowData.resultList[2].pic2Path}}>
                        <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                          <Text style={styles.rankingoneR}>{rowData.resultList[2].ranking}</Text>
                        </Image>
                        <View style={styles.tipsone}>
                          <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[2].title}</Text>
                          <View style={styles.tipsoneNIC}>
                            <Text style={styles.tipsoneN}>{rowData.resultList[2].indexNumber}</Text>
                            <View style={styles.tipsoneIC}>
                              <Image style={styles.tipsoneI} source={arr[2].icon} />
                              <Text style={styles.tipsoneC}>{arr[2].change}</Text>
                            </View>
                          </View>
                        </View>
                      </Image>:
                      <View style={styles.one} source={{uri: rowData.resultList[2].pic2Path}}>
                        <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                          <Text style={styles.rankingoneR}>{rowData.resultList[2].ranking}</Text>
                        </Image>
                        <View style={styles.tipsone}>
                          <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[2].title}</Text>
                          <View style={styles.tipsoneNIC}>
                            <Text style={styles.tipsoneN}>{rowData.resultList[2].indexNumber}</Text>
                            <View style={styles.tipsoneIC}>
                              <Image style={styles.tipsoneI} source={arr[2].icon} />
                              <Text style={styles.tipsoneC}>{arr[2].change}</Text>
                            </View>
                          </View>
                        </View>
                      </View>
                    }
                  </TouchableHighlight>
                </View>
                
              </View>
              <RankList data={rowData} {...this.props} />
              {/*<View style={[styles.list]}>
                <View style={{marginBottom: 10}}>
                  <View style={styles.listrow}>
                    <View style={styles.viewRow}>
                      <Text style={styles.head}>排名</Text>
                    </View>
                    <View style={styles.viewRow}>
                      <Text style={styles.head}>节目名称</Text>
                    </View>
                    <View style={styles.viewRow}>
                      <Text style={styles.head}>媒体</Text>
                    </View>
                    <View style={styles.viewRow}>
                      <Text style={styles.head}>报道指数</Text>
                    </View>
                  </View>
                  {
                    rowData.resultList.map((val, idx) => {
                      return idx>2?this.listRow(val, idx, rowData.type):null
                    })
                  }
                </View>
              </View>*/}
            </View>
            <Share ref="share" />
            </ScrollView>:<LoadError reload={this.fetchData} reason={this.state.errorMessage}/>))}
        </View>    
      )
    
  }
}

const styles = StyleSheet.create({
  toolbarV: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toolbarT: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 20
  },
  typeRow: {
    flex: 1,
    backgroundColor: '#ffffff',
    paddingVertical: totalWidth*0.03,
  },
  title: {
    flexDirection: 'row',
    marginBottom: 10,
    paddingHorizontal: totalWidth*0.06,
  },
  titleL: {
    flex: 15,
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    width: 2,
    height: 2,
    borderRadius: 1,
    marginRight: 2,
    backgroundColor: '#ff4546',
  },
  text: {
    color: '#fe4646',
    fontSize: 14,
  },
  drag: {
    justifyContent: 'flex-end'
  },
  three: {
    height: totalWidth*8.7/21,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
    paddingHorizontal: totalWidth*0.06,
  },
  ranking: {
    position: 'absolute',
    top: -1,
    left: totalWidth*0.036,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    width: totalWidth*0.1,
    height: totalWidth*0.113,
    resizeMode: 'contain',
  },
  rankingL: {
    color: '#ffffff',
    fontSize: 8
  },
  rankingR: {
    color: '#ffffff',
    fontSize: 16
  },
  rankingone: {
    position: 'absolute',
    top: -1,
    left: totalWidth*0.036,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    width: totalWidth*0.067,
    height: totalWidth*0.076,
    resizeMode: 'contain'
  },
  rankingoneL: {
    color: '#ffffff',
    fontSize: 6
  },
  rankingoneR: {
    color: '#ffffff',
    fontSize: 10,
  },
  tips: {
    flex: 1,
    marginTop: totalWidth*0.3,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: "center",
    backgroundColor: '#ffffff',
    opacity: 0.8,
    paddingVertical: 3,
  },
  tipsT: {
    color: '#000000',
    fontSize: 12,
    maxWidth: totalWidth*0.25,
    marginLeft: totalWidth*0.01,
  },
  tipsNIC: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: totalWidth*0.01,
  },
  tipsN: {
    color: '#ff4546',
    fontSize: 25,
    marginRight: 4,
  },
  tipsIC: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
    alignItems: 'flex-end',
    marginBottom: totalWidth*0.008,
  },
  tipsI: {
    width: totalWidth*0.024,
    height: totalWidth*0.024,
    marginBottom: totalWidth*0.008,
    resizeMode: 'contain',
  },
  tipsC: {
    fontSize: 14,
    color: '#ff4546',
  },
  tipsone: {
    flex: 1,
    marginTop: totalWidth*0.12,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: '#fff',
    opacity: 0.8,
  },
  tipsoneT: {
    color: '#000000',
    fontSize: 10,
    maxWidth: totalWidth*0.2,
    marginLeft: totalWidth*0.01,
  },
  tipsoneNIC: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
    marginRight: totalWidth*0.01,
  },
  tipsoneN: {
    color: '#ff4546',
    fontSize: 20,
  },
  tipsoneIC:{
    flexDirection: 'row',
    alignItems: 'flex-end',
    alignSelf: 'flex-end',
    justifyContent: 'center',
    marginBottom: totalWidth*0.006,
  },
  tipsoneI: {
    width: totalWidth*0.019,
    height: totalWidth*0.019,
    resizeMode: 'contain',
    marginBottom: totalWidth*0.006,
  },
  tipsoneC: {
    fontSize: 12,
    color: '#ff4546',
  },
  first: {
    flex: 4,
    height: totalWidth*8.7/21,
  },
  two: {
    flex: 3,
    marginLeft: totalWidth*0.024,
    justifyContent: 'space-between',
  },
  second: {
    height: totalWidth*0.19,
  },
  third: {
    height: totalWidth*0.19,
  },
  one: {
    flex: 1,
    justifyContent: 'space-between'
  },
  list:{
    flex: 1,
    overflow: 'hidden'
  },
  viewRow: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  head: {
    fontSize: 12,
    color: '#000000',
    textAlign: 'center'
  },
  listrow: {
    flexDirection: 'row',
    paddingVertical: totalWidth*0.015,
  },
  rank: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rankIndex: {
    width: totalWidth*0.056,textAlign: 'center'
  },
  rankChange: {
    flexDirection: 'row',justifyContent: 'flex-end', alignItems: 'center', width: totalWidth*0.084
  },
  updown: {
    marginRight: totalWidth*0.01,
  },

});